<template>
    <div class="container">
            <div class="info">
            <div v-if="role == '处理厂司机'" style="height: 30px;"></div>
            <div v-if="role == '处理厂司机'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="carStop">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fcar.png" />
                        <div style="width: 15px;"></div>
                        <div>车辆状态</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '处理厂司机'" style="height: 30px;"></div>
            <div v-if="role == '处理厂司机'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="computed">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Foil.png" />
                        <div style="width: 15px;"></div>
                        <div>油耗计算</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '处理厂操作员' || role == '处理厂任务发布员'" style="height: 30px;"></div>
            <div v-if="role == '处理厂操作员' || role == '处理厂任务发布员'" style="padding: 10px;width: 90%;margin-left: 5%;"
                @click="proce">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202368.png" />
                        <div style="width: 15px;"></div>
                        <div>待处理事项</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '处理厂操作员' || role == '处理厂任务发布员'" style="height: 30px;"></div>
            <div v-if="role == '处理厂操作员' || role == '处理厂任务发布员'" style="padding: 10px;width: 90%;margin-left: 5%;"
                @click="record">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%2018.png" />
                        <div style="width: 15px;"></div>
                        <div>历史记录</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-show="indent == '处理厂操作员' || indent == '处理厂任务发布员'" style="height: 30px;"></div>
            <div v-show="indent == '处理厂操作员' || indent == '处理厂任务发布员'"
                style="padding: 10px;width: 90%;margin-left: 5%;" @click="advice">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%2019.png"
                            mode="scaleToFill" />
                        <div style="width: 15px;"></div>
                        <div>经验分享</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="indent == '处理厂操作员' || indent == '处理厂任务发布员'"  style="height: 30px;"></div>
            <div v-if="indent == '处理厂操作员' || indent == '处理厂任务发布员'" 
                style="padding: 10px;width: 90%;margin-left: 5%;" @click="profile">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%2020.png" />
                        <div style="width: 15px;"></div>
                        <div>知识学习</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '养殖场账号'" style="height: 30px;"></div>
            <div v-if="role == '养殖场账号'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="feesManage">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fjf.png" />
                        <div style="width: 15px;"></div>
                        <div>缴费管理</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '养殖场账号'" style="height: 30px;"></div>
            <div v-if="role == '养殖场账号'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="car">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fcar.png"
                            mode="scaleToFill" />
                        <div style="width: 15px;"></div>
                        <div>车辆管理</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '养殖场账号'" style="height: 30px;"></div>
            <div v-if="role == '养殖场账号'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="driver">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fperson.png" />
                        <div style="width: 15px;"></div>
                        <div>司机管理</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '养殖场账号'" style="height: 30px;"></div>
            <div v-if="role == '养殖场账号'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="message">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fxinxi.png" />
                        <div style="width: 15px;"></div>
                        <div>信息管理</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '养殖场账号'" style="height: 30px;"></div>
            <div v-if="role == '养殖场账号'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="contract">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fqianyue.png" />
                        <div style="width: 15px;"></div>
                        <div>签约管理</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '调度员'" style="height: 30px;"></div>
            <div v-if="role == '调度员'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="task">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202359.png" />
                        <div style="width: 15px;"></div>
                        <div>任务管理</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '调度员'" style="height: 30px;"></div>
            <div v-if="role == '调度员'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="wagon">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202384.png" />
                        <div style="width: 15px;"></div>
                        <div>模拟地磅</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '实验员' || role == '任务发布实验员' || role == '任务分配实验员'" style="height: 30px;"></div>
            <div v-if="role == '实验员' || role == '任务发布实验员' || role == '任务分配实验员'" style="padding: 10px;width: 90%;margin-left: 5%;"
                @click="device">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fhelp.png"
                            mode="scaleToFill" />
                        <div style="width: 15px;"></div>
                        <div>设备管理</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '实验员' || role == '任务发布实验员' || role == '任务分配实验员'" style="height: 30px;"></div>
            <div v-if="role == '实验员' || role == '任务发布实验员' || role == '任务分配实验员'" style="padding: 10px;width: 90%;margin-left: 5%;"
                @click="demandCenter">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fhelp.png"
                            mode="scaleToFill" />
                        <div style="width: 15px;"></div>
                        <div>需求中心</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '实验员' || role == '任务发布实验员' || role == '任务分配实验员'" style="height: 30px;"></div>
            <div v-if="role == '实验员' || role == '任务发布实验员' || role == '任务分配实验员'" style="padding: 10px;width: 90%;margin-left: 5%;"
                @click="dataManage">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fhelp.png"
                            mode="scaleToFill" />
                        <div style="width: 15px;"></div>
                        <div>数据管理</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-if="role == '实验员' || role == '任务发布实验员' || role == '任务分配实验员'" style="height: 30px;"></div>
            <div v-if="role == '实验员' || role == '任务发布实验员' || role == '任务分配实验员'" style="padding: 10px;width: 90%;margin-left: 5%;"
                @click="myTask">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fhelp.png"
                            mode="scaleToFill" />
                        <div style="width: 15px;"></div>
                        <div>我的任务</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div style="height: 30px;"></div>
            <div style="padding: 10px;width: 90%;margin-left: 5%;" @click="helpNav">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <!-- <image :src="base+'/profile/farm_photo/2024/06/14/help_20240614152234A007.png'"  mode="scaleToFill"/> -->
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%2021.png"
                            mode="scaleToFill" />

                        <div style="width: 15px;"></div>
                        <div>帮助</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div v-show="role != '处理厂操作员'" style="height: 30px;"></div>
            <div v-show="role != '处理厂操作员'" style="padding: 10px;width: 90%;margin-left: 5%;" @click="report">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <!-- <image :src="base+'/profile/farm_photo/2024/06/14/time_20240614152643A025.png'"  mode="scaleToFill"/> -->
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202385.png" />
                        <div style="width: 15px;"></div>
                        <div>年度报告</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div style="height: 30px;"></div>
            <div style="padding: 10px;width: 90%;margin-left: 5%;" @click="set">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%2023.png" />
                        <div style="width: 15px;"></div>
                        <div>设置</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#000000" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div style="height: 20px;"></div>
        </div>
    
        <div style="height: 50px;"></div>
    </div>
    
    <!-- <tabBar :currentPage="currentPage" :indent="indent" :role="role"></tabBar> -->
</template>
<script>
// import tabBar from '../../compontents/tabBar/index.vue';
import personalInfo from '../../pagesScreen/pagesCompontents/personal-info.vue'
import request from '../../common/request';
export default {
    components: {
        // tabBar,
        personalInfo
    },
    data() {
        return {
            role: '',//司机/养殖场账号/调度员/处理厂操作员
            currentPage: '',
            userInfo: {},
            indent: '',
            base: '',
            requestBase: request,
            request: '',
            avatar: ''
        }
    },
    methods: {
        NFC() {
            uni.navigateTo({
                url: '/pagesPlant/index/nfc'
            })
        },
        //油耗计算
        computed() {
            uni.navigateTo({
                url: '/pagesDriver/system/compute'
            })
        },
        //车辆报停
        carStop() {
            uni.navigateTo({
                url: '/pagesDriver/system/lookStop'
            })
        },
        // 跳转设置页面
        set() {
            uni.navigateTo({ url: '/pagesDriver/system/set' })
        },
        // 跳转年度报告
        report() {
            uni.navigateTo({ url: '/pagesDriver/system/reports' })
        },
        // 跳转车辆管理
        car() {
            uni.navigateTo({ url: '/pagesFarmer/index/car' })
        },
        // 司机管理 
        driver() {
            uni.navigateTo({ url: '/pagesFarmer/index/driver' })
        },
        // 跳转缴费管理
        feesManage() {
            uni.navigateTo({ url: '/pagesFarmer/index/feesManage' })
        },
        // 跳转签约管理
        contract() {
            uni.navigateTo({ url: '/pagesFarmer/index/contract' })
        },
        //消息管理
        message() {
            uni.navigateTo({ url: '/pagesFarmer/index/message' })
        },
        // 任务管理
        task() {
            uni.navigateTo({ url: '/pagesDispatch/index/quest' })
        },
        wagon() {
            uni.navigateTo({ url: '/pagesFarmer/index/wagon' })
        },
        helpNav() {
            uni.navigateTo({ url: '/pagesDispatch/index/help' })
        },
        dataManage() {
            uni.navigateTo({ url: '/pagesExpert/index/data' })
        },
        device() {
            uni.navigateTo({ url: '/pagesExpert/index/device' })
        },
        myTask() {
            uni.navigateTo({ url: '/pagesExpert/index/quest' })
        },
        advice() {
            uni.navigateTo({ url: '/pagesPlant/index/expert' })
        },
        demandCenter() {
            uni.navigateTo({ url: '/pagesExpert/index/demandCenter' })
        },
        proce() {
            uni.navigateTo({ url: '/pagesPlant/index/historys' })
        },
        // 巡检记录或维保记录
        record() {
            uni.navigateTo({
                url: '/pagesPlant/index/history'
            })
        },
        profile() {
            uni.navigateTo({
                url: '/pagesPlant/index/profile'
            })
        }
    },
    onLoad() {

    },
    mounted() {
        this.userInfo = uni.getStorageSync('userInfo');
        this.avatar = uni.getStorageSync('userInfo').avatar;
        console.log(this.userInfo, 'userInfo');
        this.role = this.userInfo.remark;
        this.indent = uni.getStorageSync('pageIndent');
        uni.hideHomeButton();
        var pages = getCurrentPages();
        let currentPageRoute = pages[pages.length - 1].route;
        // 根据当前页面路径设置currentPage
        this.currentPage = currentPageRoute;
        console.log(this.currentPage);
        this.request = this.requestBase.config.baseURL;
    }

}
</script>
<style lang="scss">
// .container {
//     max-height: 91vh;
//     width: 100vw;
//     color: #000000;
//     font-weight: 500;
//     overflow-y: scroll;
//     background-color: #f2f8f5;
// }

// page {
//     background: #f2f8f5;
// }

.info {
    border-radius: 20px;
    width: 90%;
    margin-left: 5%;
}

.head-img image {
    width: 100rpx;
    height: 100rpx;
}

.flex-image image {
    width: 75rpx;
    height: 75rpx;
}

.line-white {
    height: 4rpx;
    width: 100vw;
    background: #eef3f1;
}
</style>